<template>
  <div class="datalist">
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="travelReq.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          travelReq.pageIndex = 1
          getCaseTravels()
        "
      >
        搜索
      </el-button>
      <el-button
        type="text"
        style="margin-left: 20px"
        size="small"
        @click="addTravelVis = true"
      >
        添加出差记录
      </el-button>
    </div>
    <div class="content">
      <div style="flex: auto">
        <el-table
          height="calc(100% - 40px)"
          :data="travelRes.Items"
          stripe
          border
          highlight-current-row
        >
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="出差人">
            <template slot-scope="scope">
              {{ scope.row.USR_Name }}
            </template>
          </el-table-column>
          <el-table-column label="联系方式">
            <template slot-scope="scope">
              {{ scope.row.USR_Phone }}
            </template>
          </el-table-column>
          <el-table-column label="出差时间">
            <template slot-scope="scope">
              {{ scope.row.CSTR_Date | formatDate }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="是否有补贴" width="100px">
            <template slot-scope="scope">
              {{ scope.row.CSTR_HasSubsidy ? '有' : '无' }}
            </template>
          </el-table-column> -->
          <el-table-column label="补贴金额">
            <template slot-scope="scope">
              {{ scope.row.CSTR_SubsidyFee }}元
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.CSTR_Remark }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="260px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="
                  curTravel = { ...scope.row }
                  editTravelVis = true
                "
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                icon="el-icon-delete"
                @click="deleteCaseTravel(scope.row.CSTR_ID)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          layout="total,prev,pager,next,sizes"
          style="float: right"
          background
          :current-page.sync="travelReq.pageIndex"
          :total="travelRes.Total"
          :page-size="travelReq.pageSize"
          :page-sizes="[10, 15, 20]"
          @size-change="
            (val) => {
              travelReq.pageSize = val
              getCaseTravels()
            }
          "
          @current-change="getCaseTravels()"
        ></el-pagination>
      </div>
    </div>

    <el-drawer title="新增" :visible.sync="addTravelVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%">
        <el-form-item label="出差日期">
          <el-date-picker
            type="date"
            v-model="newTravel.CSTR_Date"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="出差人员">
          <el-select
            filterable
            v-model="newTravel.CSTR_EmpID"
            style="width: 300px"
          >
            <el-option
              v-for="(item, index) in employees"
              :key="index"
              :label="item.USR_Name"
              :value="item.ECV_TargetID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补贴金额">
          <el-input-number
            v-model="newTravel.CSTR_SubsidyFee"
            :step="10"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="newTravel.CSTR_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addCaseTravel()">新增</el-button>
          <el-button type="text" @click="addTravelVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="修改" :visible.sync="editTravelVis" direction="rtl">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 80%"
        v-if="curTravel"
      >
        <el-form-item label="出差日期">
          <el-date-picker
            type="date"
            v-model="curTravel.CSTR_Date"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="出差人员">
          <el-select
            filterable
            v-model="curTravel.CSTR_EmpID"
            style="width: 300px"
            disabled
          >
            <el-option
              v-for="(item, index) in employees"
              :key="index"
              :label="item.USR_Name"
              :value="item.ECV_TargetID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补贴金额">
          <el-input-number
            v-model="curTravel.CSTR_SubsidyFee"
            :step="10"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="curTravel.CSTR_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="editCaseTravel()">保存</el-button>
          <el-button type="text" @click="editTravelVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import {
  getEmployees,
  getCaseTravels,
  addCaseTravel,
  editCaseTravel,
  deleteCaseTravel,
} from '@/api/core/caseTravel'
export default {
  props: ['caseId'],
  data: function () {
    return {
      travelReq: {
        pageIndex: 1,
        pageSize: 10,
        keyword: '',
      },
      travelRes: {
        Items: [],
        Total: 0,
      },
      employees: [],
      newTravel: {},
      curTravel: null,
      addTravelVis: false,
      editTravelVis: false,
    }
  },
  methods: {
    getCaseTravels() {
      this.travelReq.caseId = this.caseId
      getCaseTravels(this.travelReq).then(({ data }) => {
        this.travelRes = data
      })
    },
    getEmployees: function () {
      getEmployees().then(({ data }) => {
        this.employees = data
      })
    },
    addCaseTravel() {
      this.$confirm(
        `是否添加新的出差记录？（如果案件已统计案件成本，需手动重新统计）`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        this.newTravel.CSTR_CaseID = this.caseId
        addCaseTravel(this.newTravel).then(() => {
          this.getCaseTravels()
          this.addTravelVis = false
        })
      })
    },
    editCaseTravel() {
      this.$confirm(
        `是否保存？（如果案件已统计案件成本，需手动重新统计）`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        editCaseTravel(this.curTravel).then(() => {
          this.getCaseTravels()
          this.editTravelVis = false
        })
      })
    },
    deleteCaseTravel(id) {
      this.$confirm(
        `是否删除该记录？（如果案件已统计案件成本，需手动重新统计）`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        deleteCaseTravel(id).then(() => {
          this.getCaseTravels()
        })
      })
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getCaseTravels()
    this.getEmployees()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: 100%;
}
.row {
  height: 100%;
}
.col {
  height: 100%;
}
.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}
.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
